<template>
	<div class="record-main-box" @click="close">
		<div class="record-box">
			<div class="record-title">领取记录</div>
			<div class="record-list-box">
				<div class="item" v-for="(item,index) in recrodList" :key="index">
					<div class="left">
						<image mode="widthFix" class="icon" :src="item.img"></image>
						<div class="record-info">
							<div class="record-info-title">{{ item.type }}</div>
							<div class="record-info-date">生效时间：{{ item.createtime }}</div>
						</div>
					</div>
					<div class="split"></div>
					<div class="right">
						<div class="btn" @click.stop="use(item)">去使用</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import userApi from "@/api/userApi";
	import dateUtil from "@/utils/dateUtil";

	export default {
		data() {
			return {
				recrodList: [],
			}
		},
		mounted() {
			this.initData()
		},

		methods: {
			initData() {
				let fixDataList = [{
					id: 0,
					img: 'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Faqy-icon.png',
					type: '爱奇艺视频会员VIP',
					createtime: '2022-10-14'
				}, {
					id: 0,
					img: 'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fsx-icon.png',
					type: '省心APP团长权益30天',
					createtime: '2022-10-14'
				}, {
					id: 0,
					img: 'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fwm-icon.png',
					type: '外卖团购（无限次）',
					createtime: '2022-10-14'
				}, {
					id: 0,
					img: 'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fch-icon.png',
					type: '生活服务（无限次）',
					createtime: '2022-10-14'
				}, {
					id: 0,
					img: 'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fdd-icon.png',
					type: '出行服务（无限次）',
					createtime: '2022-10-14'
				}, {
					id: -1,
					img: 'https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fmh-icon.png',
					type: '体验7天VIP盲盒包',
					createtime: '2022-10-14'
				}];


				userApi.receiveRecordList(res => {
					let dataList = res.data

					dataList.forEach(item => {
						item.createtime = dateUtil.getDateFormtByTimestamp(item.createtime)
					})
					console.log('initData', dataList)

					fixDataList.forEach(item => {
						dataList.unshift(item)
					})

					this.recrodList = dataList
				})
				// //todo 测试使用
				// let dataList = []

				// fixDataList.forEach(item => {
				// 	dataList.unshift(item)
				// })

				// this.recrodList = dataList
			},

			close() {
				this.$emit('close')
			},
			use(item) {
				this.$emit('use', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 2;

		.record-box {
			border-radius: 20rpx;
			background-color: #faf7f2;
			padding: 0 20rpx 30rpx;
			width: 90%;
			max-height: 70vh;
			margin: 0 auto;
			box-sizing: border-box;
			overflow-y: auto;


			.record-title {
				font-size: 28rpx;
				line-height: 30rpx;
				letter-spacing: 1rpx;
				color: #9e2821;
				text-align: center;
				padding: 20rpx 0;
			}

			.record-list-box {
				.item {

					padding: 40rpx 20rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: stretch;
					margin-bottom: 20rpx;
					flex-grow: 1;

					.left {
						display: flex;
						align-items: center;
						width: 70%;

						.icon {
							width: 80rpx;
							height: auto;
							margin: 0 15rpx 0 0;
						}

						.record-info-title {
							font-size: 25rpx;
							letter-spacing: 1rpx;
							color: #9e2821;
						}

						.record-info-date {
							font-size: 22rpx;
							letter-spacing: 1rpx;
							color: #ce9390;
							margin-top: 10rpx;
						}
					}

					.split {
						border-left: dashed 2rpx #ce938f;
					}

					.right {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 120rpx;

						.btn {
							padding: 8rpx 15rpx;
							background-color: #9e2821;
							border-radius: 20rpx;
							font-size: 25rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>